<template>
  <view class="box">
    <view class="top">
      <image :src="imagePath+'glxcx/img1.png'" style="width: 100%;"></image>
      <view class="seckillTime f-c-sb">
        <view class="seckInfo">
          <view class="subHeader">{{ data.seckillName }}</view>
          <view class="info">
            <span class="redBj">秒杀价 </span>
            <span class="redTxt">￥{{ data.nowPrice }} </span>
            <span class="i">￥{{ data.costPrice }} </span>
            <span class="redTxt">仅剩{{ data.rushBuyNumber }}份</span>
          </view>
          <view class="date">活动时间：{{ data.timeStart }}至{{ data.timeEnd }}</view>
        </view>
        <view class="time">
          <view>距报名结束仅剩</view>
          <view>
            <span class="day">{{ liveCountdown.day }}天</span>
            <span class="hou">{{ liveCountdown.hou }}</span> :
            <span class="min">{{ liveCountdown.min }}</span> :
            <span class="sec">{{ liveCountdown.sec }}</span>
          </view>
        </view>
      </view>
    </view>

    <view class="seckillContent">
      <view class="item">
        <view><span class="title">活动门店</span></view>
        <view v-for="(item,index) in data.storeInfoListVos" :key="index" class="address">
          <view class="mainText">{{ item.storeName }}</view>
          <view class="secondText">{{ item.address }}</view>
          <view class="f-c-sb">
            <view class="f-c-fs">
              <view class="textCenter"><span class="mainText">{{ item.distance.toFixed(2) }}KM</span><br><span
                  class="secondText">距离</span></view>
              <view class="textCenter"><span class="mainText">{{ item.counselorNum }}人</span><br><span
                  class="secondText">服务顾问</span></view>
            </view>
            <view class="icon f-c-fe">
              <view>
                <image :src="imagePath+'glxcx/phone_icon.png'"/>
              </view>
              <view>
                <image :src="imagePath+'glxcx/nav_icon.png'"/>
              </view>

            </view>
          </view>
        </view>

      </view>
      <view class="item">
        <view><span class="title">商品/服务项目</span></view>
        <view v-for="(item,index) in data.seckillGsVos" :key="index">
          <view class="mainText">{{ item.goodsServerName }} 数量：{{ item.goodsServerNumber }}</view>
          <view class="secondText">
            规格容量：{{ item.goodsServerDescribe }} 市场价：￥{{ item.goodsServerPrice }}
          </view>
        </view>
        <view class="mainText">
          总价值：￥{{ data.priceTotal }}
        </view>
      </view>
      <view class="item">
        <view><span class="title">活动介绍</span></view>
        <view class="info">
          <u-parse :html="data.content"></u-parse>
        </view>
      </view>
    </view>
    <view class="btn">
      <view class="btn1">分享好友</view>
      <view class="btn2">立即抢购</view>
    </view>
  </view>
</template>

<script>
import {seckillDetail, seckillPreview} from '@/api/marketing.js';

export default {
  data() {
    return {
		imagePath:this.$imagePath,
      data: {},
      param: {},
      liveCountdown: {day: '0', hou: '00', min: '00', sec: '00'},
      liveCountTimes: '',


    };
  },
  onLoad(option) {
    let objParam = JSON.parse(option.param);
    if (objParam.id) {
      this.param.seckillId = objParam.id;
    } else {
      this.param = this.$get('seckillDetail')
    }
    this.init();
  },
  methods: {
    init() {
      if (this.param.seckillId) {
        this.getData();
      } else {
        this.privew()
      }
    },
    getData() {
      this.param.lon = this.$get('location')[0]
      this.param.lat = this.$get('location')[1]
      seckillDetail(this.param).then(res => {
        console.log(res);
        if (res.code == 1) {
          this.data = res.data;
          this.getLiveTimeCount(res.data.timeEnd);
        }
      })

    },
    privew() {
      seckillPreview(this.param).then(res => {
        console.log(res);
        if (res.code == 1) {
          this.data = res.data;
          this.getLiveTimeCount(res.data.timeEnd);
        }
      })
    },
    getLiveTimeCount(startTime) {
      if (startTime) {  //如果设置了开始时间
        this.liveCountTimes = setInterval(() => {
          //注：不论安卓还是ios，请将时间如 2020-02-02 20:20:20 转化为 2020/02/02 20:20:20 这种形式后再使用，否则无法转换，如下转换即可↓
          let transedPreTime = startTime.replace(/-/g, '/') //这里转化时间格式为以/分隔形式
          let nowTime = new Date().getTime();
          let preTime = new Date(transedPreTime).getTime()
          let obj = null;
          if (preTime - nowTime > 0) {
            let time = (preTime - nowTime) / 1000;
            let day = parseInt(time / (60 * 60 * 24));
            let hou = parseInt(time % (60 * 60 * 24) / 3600);
            let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
            let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
            this.liveCountdown = {
              day: day,
              hou: hou < 10 ? '0' + hou : hou,
              min: min < 10 ? '0' + min : min,
              sec: sec < 10 ? '0' + sec : sec
            };

          } else {

            obj = {day: '0', hou: '00', min: '00', sec: '00'};
            this.liveCountdown = obj
            clearInterval(this.liveCountTimes)
          }
        }, 1000)
      } else {
        var obj = {day: '0', hou: '00', min: '00', sec: '00'};
        this.liveCountdown = obj
      }
    }
  }
}
</script>

<style lang="less">
.box {
  background: linear-gradient(to right, #eec5de 0%, #ffecdb 100%);
}

.top {
  position: relative;

  .seckillTime {
    position: absolute;
    bottom: 0;
    border: 4rpx solid #ffffff;
    border-radius: 45rpx;
    background: url("https://sj.shopec.com.cn/image-server/glxcx/bj1.png") no-repeat right/45% #fff;
    width: 100%;
    font-size: 22rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    line-height: 48rpx;

    .seckInfo {
      padding: 20rpx 40rpx;

      .subHeader {
        font-size: 32rpx;
        color: #333333;
        line-height: 48rpx;
        text-shadow: 0 0 0 5rpx rgba(0, 0, 0, 0.40);
      }

      .redBj {
        width: 86rpx;
        height: 38rpx;
        background: #eb2963;
        border-radius: 4px;
        color: #ffffff;
        padding: 5rpx 10rpx;
      }

      .redTxt {
        color: #eb2963;
      }

      .i {
        color: #999999;
        text-decoration: line-through;
        font-style: italic;
        margin: 0 15rpx;
      }

      .date {
        padding: 0 20rpx;
        height: 40rpx;
        background: #c9c9c9;
        border-radius: 9rpx;
        color: #ffffff;
        line-height: 48rpx;
        font-size: 15rpx;
      }
    }

    .time {
      color: #fff;
      text-align: center;
      padding: 0 40rpx;

      .hou, .min, .sec {
        display: inline-block;
        background-color: #fff;
        width: 40rpx;
        height: 48rpx;
        line-height: 48rpx;
        color: #ff676c;
        border-radius: 6rpx;
        margin: 0 10rpx;
      }
    }

  }
}

.seckillContent {
  margin-bottom: 98rpx;
  width: 100%;
  font-family: PingFang SC, PingFang SC-Bold;
  font-weight: bold;
  color: #333333;
  letter-spacing: 1rpx;
  padding: 0 40rpx;
  box-sizing: border-box;

  .item {
    padding-bottom: 30rpx;
    line-height: 60rpx;

    .title {
      position: relative;
      font-size: 32rpx;
      line-height: 96rpx;
      text-shadow: 0rpx 0rpx 0rpx NaNpx rgba(0, 0, 0, 0.40);
    }

    .title:after {
      content: "";
      display: block;
      width: 100%;
      position: absolute;
      top: 48rpx;
      height: 10rpx;
      background: linear-gradient(to right, #ffb97a 1%, #f5295e 51%, #c12984 100%);
      border-radius: 5rpx;
    }

    .address {
      padding-bottom: 20rpx;
    }

    .textCenter {
      text-align: center;
      margin-right: 30rpx;
    }

    .mainText {
      font-size: 28rpx;
      color: #333333;
    }

    .secondText {
      font-size: 24rpx;
      color: #999999;
    }

    .icon {
      view {
        width: 35rpx;
        height: 35rpx;
        margin-left: 30rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }


}

.btn {
  display: flex;
  width: 100%;
  position: fixed;
  bottom: 0;
  height: 96rpx;
  box-shadow: 0rpx -1rpx 0rpx NaNpx rgba(0, 0, 0, 0.39);
  text-align: center;
  text-shadow: 0rpx 0rpx 0rpx NaNpx rgba(0, 0, 0, 0.40);
  line-height: 96rpx;
  font-size: 32rpx;

  .btn1 {
    width: 50%;
    background: #ffffff;
    color: #666666;
  }

  .btn2 {
    width: 50%;
    background: linear-gradient(0deg, #ff666c 0%, #ffb97a 100%);
    color: #ffffff;
  }
}

</style>
